<template>
  <div class="nav">
    <img src="./logo.png" alt="">
    <div>
      <div>
        <span @click="_changelang(1)" :class="{activeL: lang === 1}" v-if="!!isChShow">中</span>
        <span @click="_changelang(2)" :class="{activeL: lang === 2}" v-if="!!isEnShow">En</span>
      </div>
      <img src="./menu.png" alt="" @click="showNav">
    </div>
    <ul :class="{showNav: isShowNav, hiddenNav:isHiddenNav}">
      <router-link :to="{name: 'home'}" tag="li" :class="{active: current == 1}">{{navList[0]}}</router-link>
      <router-link :to="{name: 'about'}" tag="li" :class="{active: current == 2}">{{navList[1]}}</router-link>
      <router-link :to="{name: 'news'}" tag="li" :class="{active: current == 3}" v-if="isShow">{{navList[2]}}</router-link>
      <router-link :to="{name: 'product'}" tag="li" :class="{active: current == 4}">{{navList[3]}}</router-link>
      <router-link :to="{name: 'yanfa'}" tag="li" :class="{active: current == 5}">{{navList[4]}}</router-link>
      <router-link :to="{name: 'zannue'}" tag="li" :class="{active: current == 6}" v-if="isShow">{{navList[5]}}</router-link>
      <router-link :to="{name: 'lianxi'}" tag="li" :class="{active: current == 7}">{{navList[6]}}</router-link>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'vNav',
  data () {
    return {
      isShowNav: false,
      isHiddenNav: true,
      isShow: true
    }
  },
  props: {
    current: {
      type: Number
    },
    isEnShow: {
      type: Boolean,
      default: true
    },
    isChShow: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'navList': 'navList'
    })
  },
  methods: {
    showNav () {
      this.isShowNav = !this.isShowNav
      this.isHiddenNav = !this.isHiddenNav
    },
    _changelang (type) {
      this.$emit('changelang', type)
      this.$store.dispatch('recordVerson', {type})
      if (type === 1) {
        this.isShow = true
      }
      if (type === 2) {
        this.isShow = false
      }
    }
  },
  created () {
    if (this.lang === 1) {
      this.isShow = true
    }
    if (this.lang === 2) {
      this.isShow = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$font-size-base:75;  //标注稿基准字体大小
$font-color-base:#333;  //基础字体颜色
// $bgColor:#f4f4f4;  //背景色
/*-------------font-size start-------------*/
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

html,body,a{
  font-family: 'microsoft yahei','Helvetica','Verdana',sans-serif;
  @include font-dpr(12px);
  color: $font-color-base;
}
.active {
  background-color: #2154b9;
  color: #fff!important
}
.activeL {
  background-color: #2154b9!important;
  color: #fff!important
}
.nav {
  padding: 20rem/$font-size-base 30rem/$font-size-base;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 99;
  >img {
    width: 235rem/$font-size-base;
    height: 50rem/$font-size-base
  }
  >div {
    display: flex;
    align-items: center;
    >div {
      margin-right: 60rem/$font-size-base;
      span {
        width: 40rem/$font-size-base;
        height: 40rem/$font-size-base;
        line-height: 40rem/$font-size-base;
        text-align: center;
        background-color: #ccc;
        font-size: 26rem/$font-size-base;
        color: #fff;
        cursor: pointer;
        padding: .2rem .35rem;
      }
    }
    >img {
      width: 38rem/$font-size-base;
      height: 31rem/$font-size-base;
    }
  }
  ul {
    list-style: none;
    position: absolute;
    top: 90rem/$font-size-base;
    right: 0rem/$font-size-base;
    z-index: 22;
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0px 12px 29px 0px rgba(32, 112, 214, 0.35);
    li {
      // padding: 10rem/$font-size-base 52rem/$font-size-base;
      padding: 0 60rem/$font-size-base;
      height: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rem/$font-size-base;
      color: #2053b9;
      text-align: center;
      border-bottom: 1px solid #2053b9
    }
    li:last-child {
      border-bottom: 0
    }
  }
  .showNav {
    height: 420rem/$font-size-base;
    transition: all .3s
  }
  .hiddenNav {
    height: 0;
    transition: all .3s
  }
}
/*-------------font-size end-------------*/
h1 {
  font-size: 22rem/$font-size-base;
}
// 公共
.m-ppp-btn-sm {
  width: 110rem/$font-size-base;
  height: 40rem/$font-size-base;
  line-height: 40rem/$font-size-base;
  text-align: center;
  border: solid 1px #fa471e;
  font-size: 22rem/$font-size-base;
  letter-spacing: 4px;
  color: #fa471e;
}

footer {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
  div {
    flex-grow: 1;
    width:100%;
    height: 100rem/$font-size-base;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff7f34;
    img {
        margin-right: 32rem/$font-size-base;
        width: 52rem/$font-size-base;
        height: 46rem/$font-size-base
    }
    img:nth-child(2) {
        width: 50rem/$font-size-base;
        height: 52rem/$font-size-base
    }
    a {
      font-size: 30rem/$font-size-base!important;
      color: #ffffff;
    }
  }
  div:nth-child(2) {
    background-color: #fa471e
  }
}
// ==========
.m-item-t {
  padding: 44rem/$font-size-base 30rem/$font-size-base;
  font-size: 32rem/$font-size-base;
  color: $font-color-base;
  display: flex;
  justify-content:space-between;
  align-items:center;
  h1 {
    font-size: 32rem/$font-size-base;
    color: $font-color-base;
  }
  a {
    font-size: 24rem/$font-size-base;
    color: #fa471e;
  }
}

.m-p-items2 {
  width: 690rem/$font-size-base;
  margin: 0 auto;
  display: flex;
  justify-content:space-between;
  flex-wrap: wrap;
  >div {
    width: 330rem/$font-size-base;
    margin-bottom: 35rem/$font-size-base;
    img {
      width: 100%;
      height: 300rem/$font-size-base;
    }
    >div {
      height: 120rem/$font-size-base;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 30rem/$font-size-base;
      // align-items: center;
      h1 {
        font-size: 26rem/$font-size-base;
        color: $font-color-base;
      }
      div {
        display: flex;
        align-items:flex-end;
        span {
          margin-right: 20rem/$font-size-base
        }
      }
      >span {
        font-size: 22rem/$font-size-base;
        color: #636363;
        margin-top: 20rem/$font-size-base
      }
    }
  }
}
body{
  // background-color: $bgColor;
  padding-bottom: 234rem/$font-size-base
}
.mt-hr {
  width: 750rem/$font-size-base;;
  height: 12rem/$font-size-base;;
  background-color: #eee;
}
.w690{
  width: 690rem/$font-size-base;
  margin: 0 auto;
  padding: 17rem/$font-size-base 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  >img {
    width: 174rem/$font-size-base;
    height: 56rem/$font-size-base;
  }
  div {
    img {
      width: 44rem/$font-size-base;
      height: 40rem/$font-size-base;
    }
    ul {
      display: none
    }
  }
}
</style>
